---
title: SSAO
nav: 1
---

A Screen Space Ambient Occlusion (SSAO) effect.
For high quality visuals use two SSAO effect instances in a row with different radii, one for rough AO and one for fine details.

This effect supports depth-aware upsampling and should be rendered at a lower resolution. The resolution should match that of the downsampled normals and depth. If you intend to render SSAO at full resolution, do not provide a downsampled normalDepthBuffer and make sure to disable depthAwareUpsampling.

```jsx
import { SSAO } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <SSAO
    blendFunction={BlendFunction.MULTIPLY} // blend mode
    samples={30} // amount of samples per pixel (shouldn't be a multiple of the ring count)
    rings={4} // amount of rings in the occlusion sampling pattern
    distanceThreshold={1.0} // global distance threshold at which the occlusion effect starts to fade out. min: 0, max: 1
    distanceFalloff={0.0} // distance falloff. min: 0, max: 1
    rangeThreshold={0.5} // local occlusion range threshold at which the occlusion starts to fade out. min: 0, max: 1
    rangeFalloff={0.1} // occlusion range falloff. min: 0, max: 1
    luminanceInfluence={0.9} // how much the luminance of the scene influences the ambient occlusion
    radius={20} // occlusion sampling radius
    scale={0.5} // scale of the ambient occlusion
    bias={0.5} // occlusion bias
  />
)
```

## Props

<table class="params">
  <thead>
    <tr>
      <td>Name</td>
      <td>Type</td>
      <td>Default</td>
      <td>Description</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>blendFunction</td>
      <td>
        <a href="https://vanruesc.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction">
          BlendFunction
        </a>
      </td>
      <td>BlendFunction.MULTIPLY</td>
      <td>The blend function of this effect.</td>
    </tr>
    <tr>
      <td>distanceScaling</td>
      <td>Boolean</td>
      <td>true</td>
      <td>Enables or disables distance-based radius scaling.</td>
    </tr>
    <tr>
      <td>depthAwareUpsampling</td>
      <td>Boolean</td>
      <td>true</td>
      <td>Enables or disables depth-aware upsampling. Has no effect if WebGL 2 is not supported.</td>
    </tr>
    <tr>
      <td>normalDepthBuffer</td>
      <td>Texture</td>
      <td>null</td>
      <td>
        A texture that contains downsampled scene normals and depth. See
        <a href="https://vanruesc.github.io/postprocessing/public/docs/class/src/passes/DepthDownsamplingPass.js~DepthDownsamplingPass.html">
          DepthDownsamplingPass
        </a>
      </td>
    </tr>
    <tr>
      <td>samples</td>
      <td>Number</td>
      <td>8</td>
      <td>The amount of samples per pixel. Should not be a multiple of the ring count.</td>
    </tr>
    <tr>
      <td>rings</td>
      <td>Number</td>
      <td>4</td>
      <td>The amount of spiral turns in the occlusion sampling pattern. Should be a prime number.</td>
    </tr>
    <tr>
      <td>distanceThreshold</td>
      <td>Number</td>
      <td>1</td>
      <td>A global distance threshold at which the occlusion effect starts to fade out. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>distanceFalloff</td>
      <td>Number</td>
      <td>0.0</td>
      <td>The distance falloff. Influences the smoothness of the overall occlusion cutoff. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>rangeThreshold</td>
      <td>Number</td>
      <td>0.5</td>
      <td>A local occlusion range threshold at which the occlusion starts to fade out. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>rangeFalloff</td>
      <td>Number</td>
      <td>0.1</td>
      <td>The occlusion range falloff. Influences the smoothness of the proximity cutoff. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>minRadiusScale</td>
      <td>Number</td>
      <td>0.33</td>
      <td>The minimum radius scale. Has no effect if distance scaling is disabled.</td>
    </tr>
    <tr>
      <td>luminanceInfluence</td>
      <td>Number</td>
      <td>0.9</td>
      <td>Determines how much the luminance of the scene influences the ambient occlusion.</td>
    </tr>
    <tr>
      <td>radius</td>
      <td>Number</td>
      <td>20</td>
      <td>The occlusion sampling radius, expressed as a resolution independent scale. Range [1e-6, 1.0].</td>
    </tr>
    <tr>
      <td>intensity</td>
      <td>Number</td>
      <td>1.0</td>
      <td>The intensity of the ambient occlusion.</td>
    </tr>
    <tr>
      <td>bias</td>
      <td>Number</td>
      <td>0.025</td>
      <td>An occlusion bias. Eliminates artifacts caused by depth discontinuities.</td>
    </tr>
    <tr>
      <td>fade</td>
      <td>Number</td>
      <td>0.01</td>
      <td>Influences the smoothness of the shadows. A lower value results in higher contrast.</td>
    </tr>
    <tr>
      <td>color</td>
      <td>Color</td>
      <td>null</td>
      <td>The color of the ambient occlusion.</td>
    </tr>
    <tr>
      <td>resolutionScale</td>
      <td>Number</td>
      <td>1.0</td>
      <td>The resolution scale.</td>
    </tr>
    <tr>
      <td>width</td>
      <td>Number</td>
      <td>Resizer.AUTO_SIZE</td>
      <td>The render width.</td>
    </tr>
    <tr>
      <td>height</td>
      <td>Number</td>
      <td>Resizer.AUTO_SIZE</td>
      <td>The render height.</td>
    </tr>
  </tbody>
</table>
